<template>
  <div class="home-box" :class="{ 'home-show-box': show, 'home-box-levle': !level3 }">
    <div class="title" v-if="typeShow">
      <titles :title="store.childModel?.text" :centerTitle="titleNum" />
      <div
        :style="{ color: colorList5[store.styleInfo.colorType - 1].fontColor }"
        class="subTitle"
        v-if="store.childModel?.subTitle"
      >
        ——{{ store.childModel?.subTitle }}
      </div>
    </div>
    <component v-if="ComShow" :is="getUnitComponents" @pushTypeShow="pushTypeShow" />
  </div>
</template>  

<script setup lang="ts">
// @ts-nocheck
import preface from './unitComponent/preface.vue';
import unitChild from './unitComponent/unitChild.vue';
import unitChildChild from './unitComponent/unitChildChild.vue';
import unitChildChildExhibit from './unitComponent/unitChildChildExhibit.vue';
import unitChildExhibit from './unitComponent/unitChildinfo.vue';
import unitExhibit from './unitComponent/unitExhibit.vue';
import { pagerCount } from '@/utils/minxin';
import { colorList5 } from '../../data';
import titles from '../components/title.vue';
import { urls } from '@/utils/request/upload';
import { ref, reactive, computed, watch, nextTick, onActivated, onDeactivated } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';
import { useProjectStore } from '@/store';
import { storeToRefs } from 'pinia';

const store = useProjectStore();
const ComShow = ref(true);
const heartbeat = ref(0); //页面心跳值
const { childModel } = storeToRefs(store);
const show = ref(false);
const windowTops = ref(0);
const lock = ref(true);
const typeShow = ref(true);
const titleNum = ref('壹');
const level3 = ref(false);
const pushTypeShow = (e: boolean) => {
  typeShow.value = e;
};
const getNumberType = () => {
  let arr = 0;
  store.styleInfo.moduleList.findIndex((el, index) => {
    if (el.id == store.childModel.id) {
      arr = index;
    }
  });
  if (arr > 9) {
    arr = arr - 9;
  }
  switch (arr) {
    case 0:
      titleNum.value = '壹';
      break;
    case 1:
      titleNum.value = '贰';
      break;
    case 2:
      titleNum.value = '叁';
      break;

    case 3:
      titleNum.value = '肆';
      break;
    case 4:
      titleNum.value = '伍';
      break;

    case 5:
      titleNum.value = '陆';
      break;
    case 6:
      titleNum.value = '柒';
      break;
    case 7:
      titleNum.value = '捌';
      break;
    case 8:
      titleNum.value = '玖';
      break;
    case 9:
      titleNum.value = '拾';
      break;
    default:
      titleNum.value = '拾壹';
      break;
  }
};
getNumberType();
const getUnitComponents = computed(() => {
  return unitChild;
  // if (store.childModel?.children.length == 0) {
  //   level3.value = false;
  //   return preface;
  // } else {
  //   let typeUnit = false;
  //   store.childModel?.children.forEach((element) => {
  //     element.children.forEach((ele) => {
  //       if (ele.children) {
  //         typeUnit = true;
  //       }
  //     });
  //   });
  //   // console.log(typeUnit);
  //   if (typeUnit) {
  //     show.value = true;
  //     level3.value = true;
  //     return unitChildChild;
  //   } else {
  //     level3.value = true;
  //     return unitChild;
  //   }
  // }
});
watch(
  () => childModel,
  () => {
    windowTops.value = 0;
    ComShow.value = false;
    getNumberType();
    nextTick(() => {
      ComShow.value = true;
    });
  },
  { deep: true, immediate: true },
);
onActivated(() => {
  window.addEventListener('scroll', function () {
    if (!lock.value) {
      return;
    }
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop;

    windowTops.value = scrollTop;
  });
  lock.value = true;
  typeShow.value = true;
  if (heartbeat.value !== store.heartbeatCurrent) {
    windowTops.value = 0;
  } else {
    if (windowTops.value > 300) {
      nextTick(() => {
        setTimeout(() => {
          window.scrollTo({
            top: windowTops.value,
            // behavior: 'smooth', // 使用平滑滚动效果
          });
        }, 100);
      });
    }
  }
});
onDeactivated(() => {
  lock.value = false;
  window.removeEventListener('scroll', function () {
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    // console.log('滚动距离：' + scrollTop + 'px');
    windowTops.value = scrollTop;
  });
});
</script>

<style lang="less" scoped>
.home-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  padding-bottom: 200px;
}
.home-box-levle {
  padding-bottom: 0px;
}
.home-show-box {
  margin-bottom: -300px;
}
.title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 50px;
  margin-bottom: 30px;
}
.subTitle {
  margin-top: 8px;
  color: #e9d5b0;
  font-family: 'SourceHanSerifCN-medium';
  font-size: 20px;
  font-style: normal;

  line-height: 30px; /* 150% */
}
</style>
